/**
* 功能描述: 分钟倒计时demo
* @author 崔孝楠
* @date 2022/10/9 22:24
* @version 1.0
*/
<template>
  <div class="yw-statistic">
    <!-- title -->
    <div class="yw-statistic-title">Minute Countdown</div>
    <!-- 日期文本 -->
    <span class="yw-statistic-content-value">{{ formatTime }}</span>
  </div>
</template>

<script>
import {onMounted, onUnmounted, ref} from "vue";

export default {
  name: "index",
  setup() {
    // 毫秒
    let dateTime = ref(1000 * 60 * 60 * 2)
    // 格式化后的时间
    let formatTime = ref(onFormatTime(dateTime.value))
    let timer = null

    onMounted(() => {
      // 减一分钟
      timer = setInterval(() => {
        dateTime.value = dateTime.value - 1000 * 60
        formatTime.value = onFormatTime(dateTime.value)
      }, 1000 * 60)
    })

    onUnmounted(() => {
      clearInterval(timer)
    })

    /**
     * 格式化 HH:mm:ss
     */
    function onFormatTime(time) {
      let hour = Math.floor(time / (1000 * 60 * 60))
      let minute = Math.ceil((time % (1000 * 60 * 60)) / (1000 * 60))
      if(minute < 10) {
        minute = '0' + minute
      }
      return hour + '小时' + minute + '分'
    }

    return { formatTime }

  }
}
</script>

<style scoped>

</style>
